<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/includes.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>优惠券</title>
<link type="text/css" rel="stylesheet" href="<c:url value='/css/reset.css'/>" />
<link type="text/css" rel="stylesheet" href="<c:url value='/css/app/baidu/coupon/coupon.css'/>" />
<link type="text/css" rel="stylesheet" href="<c:url value='/css/app/baidu/coupon/style.css'/>" />
<script type="text/javascript" src="<c:url value='/js/jquery-1.4.2.min.js'/>"></script>
<script type="text/javascript" src="<c:url value='/js/jquery.PrintArea.js'/>"></script>
<script type="text/javascript">
//判断浏览器
var Browser=new Object();
Browser.userAgent=window.navigator.userAgent.toLowerCase();
Browser.ie=/msie/.test(Browser.userAgent);
Browser.Moz=/gecko/.test(Browser.userAgent);

$(function() {
	var current = 0;
	var total = <c:out value="${num}"/>;
	next();
	/**
	* click controls next or prev,
	* pauses the slideshow, 
	* and displays the next or prevoius image
	*/
	$('#msg_next').bind('click',function(e){
		next();
		e.preventDefault();
	});
	
	$('#msg_prev').bind('click',function(e){
		prev();
		e.preventDefault();
	});
	
	/**
	*打印优惠券
	*
	**/
	$('#msg_print').bind('click',function(e){
		$('#msg_printArea').empty().append("<img src='"+$("#msg_wrapper img").attr('src')+"'/>");
		$("#msg_printArea").printArea();
	});
	
	$('#msg_show').bind('click',function(e){
		window.open($("#msg_wrapper img").attr('src'));
	});

	/**
	* show the next image
	*/
	function next(){
		++current;
		showImage();
	}

	/**
	* shows the previous image
	*/
	function prev(){
		--current;
		showImage();
	}

	/**
	* shows an image
	* dir : right or left
	*/
	function showImage(dir){
		if(total == 0){
			$("#msg_controls").hide();
			showMessage("暂无相应优惠券，请收藏本应用，我们将在第一时间更新");
		}else{
			$.ajax({
				type:"get",
				url:"<c:url value='/app/getCouponItem.nhtml'/>",
				data:"productCode=<c:out value='${productCode}'/>&current="+current,
				datatype:"json",
				beforeSend:function(){
					$("#message").hide();
					$("#msg_loading").show();
				},
				success:function(result){
					var flag = result.flag;
					if(flag == "success"){
						var source = "../../"+result.img;
						var $currentImage = $('#msg_wrapper').find('img');
						if($currentImage.length){
							$currentImage.fadeOut(function(){
								$(this).remove();
								 /* var img=new Image();
								 img.src = source;
								 if(Browser.ie){
								        img.onreadystatechange =function(){
								            if(img.readyState=="complete"||img.readyState=="loaded"){
								            	AutoResize();
								            }
								        }       
								    }else if(Browser.Moz){
								        img.onload=function(){
								            if(img.complete==true){
								            	AutoResize();
								            }
								        }       
								    }
								 $('#msg_wrapper').empty().append($image.fadeIn()); */
 								$('<img />').attr('src',source).load(function(){
									var $image = $(this);
									$image.hide();
									$("#msg_loading").hide();
									$('#msg_wrapper').empty().append($image.fadeIn());
									AutoResize();
								});
							});
						}
						else{
							$('<img "/>').attr('src',source).load(function(){
									var $image = $(this);
									$image.hide();
									$("#msg_loading").hide();
									$('#msg_wrapper').empty().append($image.fadeIn());
									AutoResize();
							});
						}
					}else if(flag == "first"){
						current = 1;
						$("#msg_loading").hide();
						showMessage("已到第一张了，尝试点下一张");
					}else if(flag == "end"){
						current = total;
						$("#msg_loading").hide();
						showMessage("已到最后一张了，尝试点上一张");
					}else if(flag == "nodata"){
						$("#msg_loading").hide();
						$("#msg_controls").hide();
						showMessage("暂无相应优惠券，请收藏本应用，我们将在第一时间更新");
					}
				},
				error:function(){
					$("#msg_loading").hide();
					showMessage("暂无相应优惠券，请收藏本应用，我们将在第一时间更新");
				}
			});
		}
	}
});

function showMessage(message){
	var str = "";
	str += "<img src='<c:url value='/images/app/baidu/coupon/stop.gif'/>'/>";
	str += message;
	$("#message").empty().append(str);
	$("#message").show();
}

/*百度应用自适应高度*/
function AutoResize() {
    try
    {            
    	var h = $("#wrapper").height();
        if(h > 0)
        {
            bdjs.clearAutoHeight();
            bdjs.setHeight(h); 
        }
        else
        {
            setTimeout("AutoResize()", 50);
        }
    }
    catch(e)
    {
    }
}
</script>
</head>
<body>
<div id="wrapper">  
	<div id="header">  
		 <ul id="quick">
		 <c:forEach var="product" items="${products }" varStatus="">
		 	<li id="bind_market" <c:if test="${productCode ==  product.code}" > class="select" </c:if>><a href="<c:url value="/app/baidu/coupon.nhtml"><c:param name="productCode" value="${product.code}"/></c:url>"><img src='<c:url value="${product.logo }"/>'/><br/><c:out value="${product.name }"/></a></li> 
		 </c:forEach>
		 </ul>
	 </div>   
	<div id="container">
		<div id="msg_slideshow" class="msg_slideshow">
			<div id="msg_controls" class="msg_controls">
				<a href="#" id="msg_prev" class="msg_prev"><img src="<c:url value = '/images/app/baidu/coupon/pre.png'/>"/></a>
				<a href="#" id="msg_show" class="msg_show"><img src="<c:url value = '/images/app/baidu/coupon/datu.png'/>"/></a>
				<a href="#" id="msg_print" class="msg_print"><img src="<c:url value = '/images/app/baidu/coupon/print.png'/>"/></a>
				<a href="#" id="msg_next" class="msg_next"><img src="<c:url value = '/images/app/baidu/coupon/next.png'/>"/></a>
			</div>
			<div id="message" class="message" style="display: none;"></div>
			<div id="msg_loading" class="msg_loading"></div>
			<div id="msg_wrapper" class="msg_wrapper"></div>
			<div id="msg_printArea" style="display: none;"></div>
		</div>
	</div>
	<div id="footbg">
		<div id="footer">
			<div>Powered by <a href="http://www.seemsea.com" target="_blank" title="Powered by Seemsea">Seemsea.com</a></div>
		</div>  
	</div>
</div> 
<script src="http://app.baidu.com/static/appstore/scripts/bdjs_client-1.0.js"></script>
<script src="http://app.baidu.com/static/appstore/monitor.st"></script>
</body>
</html>